<template>
  <div >
    <div class="table_div">
      <!-- 搜索 -->
      <el-form ref="formSearch" :model="params" :inline="true" size="small">
        <el-form-item label="操作人" prop="username">
          <el-input
            v-model="params.username"
            clearable
            class="filter-item"
            placeholder="支持模糊查询"
          />
        </el-form-item>
        <el-form-item label="日期搜索" prop="date">
          <el-date-picker
            v-model="params.date"
            type="daterange"
            range-separator=":"
            class="el-range-editor--small filter-item"
            style="height: 30.5px;width: 220px"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-form-item>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toPageQuery">搜索</el-button>
        <el-button class="filter-item" size="mini" icon="el-icon-close" @click="resetSearchData">重 置</el-button>
      </el-form>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="请求方法">
              <span>{{ props.row.method }}</span>
            </el-form-item>
            <el-form-item label="请求参数">
              <span>{{ props.row.params }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="ip" label="IP"/>
      <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源"/>
      <el-table-column prop="operation" label="描述"/>
      <el-table-column prop="browser" label="浏览器"/>
      <el-table-column prop="time" label="请求耗时" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
          <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
          <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建日期" width="180px"/>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="totalCount"
      :current-page="currentPage + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
/* eslint-disable */
import initData from '@/mixins/initData'
import initDict from '@/mixins/initDict'
import {listPageLogInfo } from '@/api/log'
import Config from '@/config'

export default {
  mixins: [initData,initDict],
  created() {
    this.setHeight(250); //高度需要调整
    this.$nextTick(() => {
      this.initPageData()
    })
  },
  data() {
    return {

    }
  },
  methods: {
    beforeInit() {
      this.url = listPageLogInfo;
      if (this.params.date) {
        this.params['startTime'] = this.params.date[0]
        this.params['endTime'] = this.params.date[1]
      }
      return true
    },

  }
}
</script>

<style scoped>
.table_div {
  padding: 8px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

</style >
